<template>
    <div class="col card p10">
        <label style="text-align: center;" class="title">电磁阀控制</label>
        <div class="row_center">
            <el-switch @click="onClickChange1" v-model="ctx.v1" active-text="电磁阀1"/>
            <el-switch @click="onClickChange2" class="ml" v-model="ctx.v2" active-text="电磁阀2"/>
            <el-switch @click="onClickChange3" class="ml" v-model="ctx.v3" active-text="电磁阀3"/>
            <el-switch @click="onClickChange4" class="ml" v-model="ctx.v4" active-text="电磁阀4"/>
        </div>
        <div class="row_center">
            <el-switch @click="onClickChange5" v-model="ctx.v5" active-text="电磁阀5"/>
            <el-switch @click="onClickChange6" class="ml" v-model="ctx.v6" active-text="电磁阀6"/>
            <el-switch @click="onClickChange7" class="ml" v-model="ctx.v7" active-text="电磁阀7"/>
            <el-switch @click="onClickChange8" class="ml" v-model="ctx.v8" active-text="电磁阀8"/>
        </div>
        <div class="row_center">
            <el-switch @click="onClickChange9" v-model="ctx.v9" active-text="电磁阀9"/>
            <el-switch @click="onClickChange10" class="ml" v-model="ctx.v10" active-text="电磁阀10"/>
        </div>
    </div>
</template>

<script setup lang="ts">

import { reactive, watch } from 'vue';
import { heatState } from '../../service/heat_def';
import { sw_ctrl } from '../../service/heat_cmd';
import { dialog } from '../../service/ui';

interface Ctx {
    v1: boolean,
    v2: boolean,
    v3: boolean,
    v4: boolean,
    v5: boolean,
    v6: boolean,
    v7: boolean,
    v8: boolean,
    v9: boolean,
    v10: boolean,
}

const ctx = reactive<Ctx>({
    v1: heatState.ctrl.v1,
    v2: heatState.ctrl.v2,
    v3: heatState.ctrl.v3,
    v4: heatState.ctrl.v4,
    v5: heatState.ctrl.v5,
    v6: heatState.ctrl.v6,
    v7: heatState.ctrl.v7,
    v8: heatState.ctrl.v8,
    v9: heatState.ctrl.v9,
    v10: heatState.ctrl.v10,
})

watch(() => heatState.ctrl, () => {
    ctx.v1 = heatState.ctrl.v1;
    ctx.v2 = heatState.ctrl.v2;
    ctx.v3 = heatState.ctrl.v3;
    ctx.v4 = heatState.ctrl.v4;
    ctx.v5 = heatState.ctrl.v5;
    ctx.v6 = heatState.ctrl.v6;
    ctx.v7 = heatState.ctrl.v7;
    ctx.v8 = heatState.ctrl.v8;
    ctx.v9 = heatState.ctrl.v9;
    ctx.v10 = heatState.ctrl.v10;
})

async function ctrl(id: number, v: boolean) {
    try {
        await sw_ctrl(id, v);
    } catch (msg) {
        dialog.err(msg);
    }
}

async function onClickChange1() {
    await ctrl(3, ctx.v1);
}

async function onClickChange2() {
    await ctrl(4, ctx.v2);
}

async function onClickChange3() {
    await ctrl(5, ctx.v3);
}

async function onClickChange4() {
    await ctrl(6, ctx.v4);
}

async function onClickChange5() {
    await ctrl(7, ctx.v5);
}

async function onClickChange6() {
    await ctrl(8, ctx.v6);
}

async function onClickChange7() {
    await ctrl(9, ctx.v7);
}

async function onClickChange8() {
    await ctrl(10, ctx.v8);
}

async function onClickChange9() {
    await ctrl(11, ctx.v9);
}

async function onClickChange10() {
    await ctrl(12, ctx.v10);
}

</script>
